<template>
    <div class="fixed top-0 left-0 w-[100%] h-full">
        <TopologyEditor :editable="false" :data="data" v-if="types" />
        <div v-else class="flex justify-center items-center h-full">
            <img src="@/assets/screenimg/null-copy.png" />
        </div>

    </div>
</template>
<script lang="ts" setup>
import TopologyEditor from '@/components/TopologyEditor/index.vue'
import { getTopoInfo } from '@/api/screen';
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'
import { configurationPageStore } from '@/store/modules/configurationPage';
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()
const props = defineProps({
    id: {
        type: String || Number,
        default: ""
    }
});
const data = ref('id')
const types = ref(true)
let store = configurationPageStore()
const getTopoInfodata = () => {
    getTopoInfo({
        id: props.id
    }).then(res => {
        types.value = true
        data.value = JSON.stringify(res.result.topoInfo.topoData)
        store.setTopoId(res.result.topoInfo.id)
        store.setTopoName(res.result.topoInfo.topoName)
        store.setProjectId(res.result.topoInfo.projectId)
    }).catch(err => {
        types.value = false
    })
}
watch(() => props.id, (newValue, oldValue) => {
    if(newValue && newValue!==0 ){
        getTopoInfodata()
    }
}, { immediate: true, deep: true })
</script>
